<template>
    <div class="app-container oneSearchNoFooter">
        <div class="customContainer">
            <!-- 头 -->
            <div class="customHeader">
                <el-button class="pull-right" type="primary" size="small" @click="addEditClick()">新增一级分类</el-button>
            </div>

            <!-- 列表 -->
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border fit
                size="small">
                <el-table-column align="center" label='序号' width="50">
                    <template slot-scope="scope">
                        <span class="indexColor">{{scope.$index+1}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='一级分类'>
                    <template slot-scope="scope">
                        <!-- <router-link :to="{name:'information/machineType_tow',params :{id:scope.row.id}}"> -->
                            <el-button @click="goMachineTypeTow(scope.row.id)" type="text" size="small">{{scope.row.name}}</el-button>
                        <!-- </router-link> -->
                    </template>
                </el-table-column>
                <!-- 列表的操作按钮 -->
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="addEditClick(scope.row.id,scope.$index,1,scope.row.name,scope.row.is_ticket)"
                            type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <el-button @click="addEditClick(scope.row.id,scope.$index,2)" type="primary" size="mini">新增二级分类</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分类弹框 -->
            <el-dialog :close-on-click-modal="false" width="400px" :title="dialogTitle" :visible.sync="dialog"
                append-to-body @close="callOf('saveForm')">
                <el-form :model="saveForm" ref="saveForm" :rules="rules" class="demo-form-inline">
                    <el-form-item label="所属一级分类" v-if="addTow">
                        <el-select v-model="saveForm.id" disabled>
                            <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="addTow" label="　·考核类型" prop="is_check">
                        <el-select v-model="saveForm.is_check">
                            <el-option v-for="item in checkList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="addTow" label="　·出货方式" prop="shipment_type">
                        <el-select v-model="saveForm.shipment_type">
                            <el-option v-for="item in shipmentList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="addTow" label="　·适用卡" prop="suit_card_type">
                        <el-select v-model="suit_card_type" multiple collapse-tags @change="switchSuitCardType">
                            <el-option v-for="item in getSuitCardArr" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="typeName" prop="name">
                        <el-input v-model="saveForm.name"></el-input>
                    </el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-if="!addTow" v-model="saveForm.is_ticket" label="彩票机"
                        border></el-checkbox>
                    <el-checkbox v-model="offlineAnalyze" v-if="addTow">忽略离线分析</el-checkbox>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveClick('saveForm')" size="small"> 确 定 </el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
    import {
        getList,
        save,
        getSuitCard
    } from "@/api/information/machineType";
    import { num1to255 } from '@/utils/validate'
    export default {
        data() {
            return {
                list: null,
                listLoading: false,
                dialogTitle: '',
                addTow: false,
                url: '',
                typeName: '',
                offlineAnalyze: false,
                checkList: [{ name: '考核类', id: '1' }, { name: '非考核类', id: '2' }],
                shipmentList: [{ name: '日报出货', id: '2' },{ name: '批量出货', id: '1' }, { name: '实时出货', id: '3' }],
                getSuitCardArr:[],
                suit_card_type:[],
                saveForm: {
                    name: '',
                    id: '',
                    parent_id: 0,
                    is_ticket: false,
                    is_ignore: "",
                    shipment_type: "2",
                    is_check:'1',
                    suit_card_type:''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入内容', trigger: 'blur' },
                    ],
                    is_check: [
                        { required: true, message: '请选择考核类型', trigger: 'change' },
                    ],
                    shipment_type: [
                        { required: true, message: '请选择出货方式', trigger: 'change' },
                    ],
                    suit_card_type:[
                         { required: true, message: '请选择适用卡', trigger: 'change' },
                    ]
                },
                dialog: false,
                innerVisible: false,
            };
        },
        created() {
            this.fetchData();
        },
        methods: {
            //适用卡切换事件
            switchSuitCardType(val){
                this.saveForm.suit_card_type = val.length==0?'':val.join(',');
            },
            saveClick(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.saveForm.is_ignore=this.offlineAnalyze?"1":"0";
                        save(this.saveForm, this.url).then(response => {
                            this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                            if (response.code == 1) {
                                this.$refs[formName].resetFields();
                                this.fetchData();
                                this.dialog = false
                            }
                        });
                    }
                });
            },
            addEditClick(id, index, type, name, is_ticket) {
                this.saveForm.is_ticket = is_ticket ? is_ticket : '0';
                this.saveForm.id = id;
                this.typeName = type == 2 ? "二级分类名称" : "一级分类名称";
                this.saveForm.parent_id = type == 2 ? id : 0;
                this.addTow = type == 2 ? true : false;
                this.url = name ? "/Machine/update_machine_type" : "/Machine/create_machine_type"
                if (type == 1) {
                    this.dialogTitle = "编辑一级分类"
                } else if (type == 2) {
                    this.dialogTitle = "新增二级分类";
                    this.saveForm.suit_card_type='';
                    this.suit_card_type=[];
                    getSuitCard({}).then(res => {
                       this.getSuitCardArr = res.data;
                    })
                } else {
                    this.dialogTitle = "新增一级分类"
                }
                this.saveForm.name = name;
                this.dialog = true;
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList({}).then(response => {
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            //关闭弹框重置
            callOf(formName) {
                this.$refs[formName].resetFields();
                this.offlineAnalyze=false;
                this.saveForm.is_check="1";
                this.dialog = false;
            },
            goMachineTypeTow(id){
                this.$router.push({name:'information/machineType_tow',params :{id,list:this.list}})
            }
        }
    };
</script>